<template>
  <el-card class="box-card">
    <p>
    <div class="flex items-center">
      <el-space alignment="flex-end">
        <el-avatar :size="90" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
        <span class="mr-3"> {{ info.userTrueName }} </span>
        <span class="mr-2" style="color: var(--el-text-color-regular)">
          {{ info.departmentName }}
        </span>
        <el-tag>{{ info.roleName }}</el-tag>
      </el-space>
    </div>
    </p>
    <p>
      <el-descriptions :column="3" size="large" class="mt-4">
        <el-descriptions-item label="工号">{{ info.userName }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ info.gender == 1 ? '男' : '女' }}</el-descriptions-item>
        <el-descriptions-item label="出生日期">{{ convertDate(info.birthDate) }}</el-descriptions-item>
        <el-descriptions-item label="电话">{{ info.tel }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ info.email }}</el-descriptions-item>
      </el-descriptions>
    </p>
  </el-card>
</template>

<script lang="ts" setup>
import store from "@/store";
import { defineComponent, computed, ref } from 'vue'
const convertDate = computed(() => (date: Date) => {
  if (!date) return ''
  var date = new Date(date);
  return [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
})
let info = ref({
  userName: '',
  userTrueName: '',
  gender: 0,
  departmentName: '',
  roleName: '',
  tel: '',
  email: '',
  birthDate: ''
})
info.value = store.getters["user/userInfo"]
</script>

<style lang="scss" scoped>
.box-card {
  margin: 2px;

  .mr-3 {
    font-size: 30px
  }

  .mr-2 {
    font-size: 20px
  }
}
</style>